<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Agn生成器</title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <meta content="email=no" name="format-detection">
    <script crossorigin="anonymous" integrity="sha384-c8inZyD0O4L/ErSuX3RVWgqsgtiAUw34TeSWiUwbKaXaI2RQg8SKVe80cipDBf0D" src="https://lib.baomitu.com/vue/2.6.7/vue.min.js"></script>
    <link crossorigin="anonymous" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" href="https://lib.baomitu.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script crossorigin="anonymous" integrity="sha384-fYxN7HsDOBRo1wT/NSZ0LkoNlcXvpDpFy6WzB42LxuKAX7sBwgo7vuins+E1HCaw" src="https://lib.baomitu.com/moment.js/2.24.0/moment.min.js"></script>
    <script crossorigin="anonymous" integrity="sha384-U/+EF1mNzvy5eahP9DeB32duTkAmXrePwnRWtuSh1C/bHHhyR1KZCr/aGZBkctpY" src="https://lib.baomitu.com/axios/0.18.0/axios.min.js"></script>
    <script crossorigin="anonymous" integrity="sha384-S2QR8FFC2taQMwIsBKVmvYCBnA1MewmutcASWe7y9srSL5A6PXmZPJ7iq1Np/GqS" src="https://lib.baomitu.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
    <script crossorigin="anonymous" integrity="sha384-8CYhPwYlLELodlcQV713V9ZikA3DlCVaXFDpjHfP8Z36gpddf/Vrt47XmKDsCttu" src="https://lib.baomitu.com/clipboard.js/2.0.4/clipboard.min.js"></script>
    <script crossorigin="anonymous" integrity="sha384-c9m22wgYuGmVnDbqtDiQ7GJ8H4LzJBB4sUBGVPWyVc6gmku4Z5FwBjphfR6245v6" src="https://lib.baomitu.com/konva/3.1.0/konva.min.js"></script>
    <style>
        .container{
            padding: 15px;
        }
        .score {
            position: absolute;
            width: 150px;
            height: 150px;
            right: -77px;
            z-index: 20;
            top: 100px;
        }
        .scoretxt{
             font-size: 38px;
            color: #fff;
            line-height: 150px;
            text-align: center;
             position: relative;
        }
        .preview{
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
            width: 100%;
            background: url(./bg.png) top left/cover no-repeat;
        }
        .bgg{
            color: #fff!important;
            opacity: .85;
            position: relative;
        }
        .bgg .text-overflow{
            min-height: 170px;
            padding: 10px 0 0 65px ;
        }
        .acid{
            position: absolute;
            right: 10px;
            top: -20px;
            text-align: right;
        }
        .title{
            margin-left: -20px;
        }
        .author{
            width: 220px;
            height: 68px;
            background: url(./avatar.png) top left/cover no-repeat;
            margin-left: -20px;
            text-indent: 127px;
            line-height: 54px;
            white-space: nowrap;
        }
        .posttime{
            color: #999;
            line-height: normal;
               text-indent: 70px;
               font-size: 12px;
               height: 12px;
               margin-top: -10px;
        }
        .hexgon{
            width: 150px;
            height: 150px;
            position: absolute;
            left: 0;
            top: 0;
        }
        .lemon-preview{
            background: url("lemon.png") top left/cover no-repeat;
            width: 700px;
            height: 359px;
            margin: 0 auto;
            display: flex;
            position: relative;
        }
        .lemon-score{
            position: absolute;
            width: 160px;
            height: 160px;
            line-height: 160px;
            font-size: 50px;
            text-align: center;
            top: 99.5px;
            left: 275px;
        }
        .lemon-preview-left,
        .lemon-preview-right{
            flex: 1;
            padding: 10px;
        }
        .lemon-preview-left .h2{
            padding-right: 10px;
            margin: 5px 0 0;
        }
        .lemon-preview-right .h2{
            margin-left: 50px;
        }
        .lemon-preview-right .text-overflow{
            margin-left: 80px;
            height: 169px;
        }
        .lemon-title{
            padding: 30px 30px 0;
        }
        .lemon-content{
            text-indent: 2em;
            width: 258px;
            height: 188px;
            overflow: hidden;
            padding: 20px;
            white-space: normal;
            background: transparent;
            border: none;
            color: inherit!important;
        }
        .article-content{
            background: transparent;
            border: none;
            color: inherit!important;
            height: 112px;
            overflow: hidden;
            white-space: normal;
            padding-top: 60px;
            margin-left: -20px;
            text-indent: 2em;
            font-size: 12px;
        }
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
     <a href="https://github.com/yatace/agn" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
<div class="container" id="app" v-cloak>
    <p class="h4">AGN 生成器
        <button class="btn btn-primary btn-md" @click="lemon=false">AGN模式</button>
        <button class="btn btn-warning btn-md" @click="lemon=true">酸🍋模式</button>
        <a href="search.html">查询评分</a>
    </p>
    <div class="alert alert-danger" role="alert">
        <p class="h5">2019/03/05更新：</p>
        <ol>
            <li>服务器的白嫖时间到了，上传评分和查询暂时不可用了估计要等明天了。生成评分可以手动填写标题和作者</li>
        </ol>
    </div>
    <div class="form-group">
        <label for="article">文章网址/Ac号</label>
        <input type="text" id="article" class="form-control input-sm" @blur="getArticle" v-model="article" >
    </div>
    <div class="form-group">
        <label for="title">标题</label>
        <input type="text" id="title" class="form-control input-sm"  v-model="title" >
    </div>
    <div class="form-group">
        <label for="author">作者</label>
        <input type="text" id="author" class="form-control input-sm"  v-model="author" >
    </div>
    <div class="form-group">
        <label for="comment">评论员</label>
        <input type="text" id="comment" class="form-control input-sm"  v-model="comment" >
    </div>
    <div class="form-group">
        <label for="content">内容 <button class="btn btn-sm btn-danger"  @click="content = ''">清空</button></label>
        <textarea id="content" class="form-control input-sm"  v-model="content" rows="7"></textarea>
    </div>
    <div class="form-group">
        <label for="summary">总评</label>
        <input type="text" id="summary" class="form-control input-sm"  v-model="summary" >
    </div>
     <div class="form-group">
        <label for="score">评分</label>
        <input type="range" id="score" class="form-control input-sm"  v-model.number="score" max="10" min="0" step="0.1">
    </div>
      <div class="form-group">
        <div class="col-md-2">
             <label for="startcolor">0分色</label>
            <input type="color" id="startcolor" class="form-control input-sm"  v-model="startcolor" >
        </div>
        <div class="col-md-2">
             <label for="endcolor">10分色</label>
             <input type="color" id="endcolor" class="form-control input-sm"  v-model="endcolor" >
        </div>
          <div class="col-md-2">
              <label for="fontcolor">文本配色</label>
              <input type="color" id="fontcolor" class="form-control input-sm"  v-model="fontcolor" >
          </div>
        <div class="col-md-4">
             <button class="btn btn-success"  @click="defaultColor">NTR绿</button>
             <button class="btn btn-danger"  @click="orangeColor">爽文橙</button>
        </div>
        <div class="clearfix"></div>
      </div>
     <div class="form-group">
        <label for="content">预览
            <button class="btn btn-sm btn-success" v-if="acid" @click="captureImage">下载</button>
            <button class="btn btn-sm btn-success" v-if="acid" @click="uploadAndCopy">上传图片</button>
            {{uploadUrl}}
            <button class="btn btn-sm btn-success clipboard" :data-clipboard-text="uploadUrl" >复制链接</button>
        </label>
        <div style="position: relative;overflow: hidden">
            <div class="preview" v-if="!lemon">
                <div class="col-md-6 col-xs-6 col-sm-6" style="position: relative">
                    <p class="text-overflow h4 title">{{title}}</p>
                    <pre class="article-content" v-text="articleContent"></pre>
                    <div class="text-overflow author">{{author}}
                    <div class="posttime" v-if="posttime">
                        {{moment(posttime).format('YYYY年MM月DD日 HH:mm:ss')}}
                    </div>
                    </div>
                    <div class="score">
                          <div id="canvas" class="hexgon">
                         </div>
                         <div class="scoretxt" :style="{color:fontcolor}">
                               {{score.toFixed(1)}}
                         </div>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="col-md-6 col-xs-6 col-sm-6 bgg" :style="{background:bgc,color:fontcolor+'!important'}">
                    <p class="h1" :style="{color:summaryColor,'text-shadow': '0.5px 0.5px #bbb'}">{{summary}} </p>
                    <div class="acid" >
                        <p class="h2">AGN·中国</p>
                        {{acid}}

                    </div>
                    <p class="text-overflow" v-html="content.replace(/\n/g,'<br>')"></p>
                    <p>评论员：{{comment}}  {{moment().format('YYYY年MM月DD日')}}</p>
                </div>
                <div class="clearfix"></div>

            </div>
            <div class="lemon-preview" v-if="lemon">
                <div class="lemon-preview-left" :style="{color:fontcolor}">
                    <p class="lemon-title h4">{{title}}</p>
                    <pre class="lemon-content" v-text="articleContent"></pre>
                    <p class="h2 text-right">酸柠檬新鲜度</p>
                </div>
                <div class="lemon-preview-right">
                    <p class="h3">柠檬酸度：</p>
                    <p class="h2">{{summary}}</p>
                    <p class="text-overflow" v-html="content.replace(/\n/g,'<br>')"></p>
                    <p class="h5">评分机构：{{comment}}</p>
                </div>
                <div class="lemon-score">
                    {{`${score*10}%`}}
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    var app = new Vue({
        el:'#app',
        data(){
            return {
                score:10,
                lemon:false,
                title:'',
                summary:'文豪',
                articleContent:'',
                content:'',
                comment:localStorage.getItem('comment')||'yang',
                article:'',
                author:'',
                acid:'',
                posttime:'',
                channelId:'',
                releaseDate:'',
                uploadUrl:'',
                summaryColor:'white',
                layer:'',
                hexgon:'',
                fontcolor:'#ffffff',
                endcolor:'#ffa500',
                startcolor:'#fcdd49',
                colors:[],
                bgc:"#ffa500"
            }
        },
        created(){
            var clipboard = new ClipboardJS('.clipboard');
            clipboard.on('success', function(e) {
                alert('复制成功')
                e.clearSelection();
            });
            this.getRgb(this.hexToRgb(this.startcolor),this.hexToRgb(this.endcolor));
            this.$nextTick(()=>{
                  var stage = new Konva.Stage({
              container: 'canvas',   // id of container <div> 
              width: 150,
              height: 150
            });
            // then create layer 
            this.layer = new Konva.Layer();
            // create our shape 
            this.hexgon = new Konva.RegularPolygon({
                x: 75,
                y: 75,
                radius: 60,
                sides: 6,
                fill: this.endcolor,
                stroke: 'white',
                shadowColor: 'grey',
                shadowBlur: 10,
                shadowOffset: {
                    x : 0,
                    y : 0
                },
                shadowOpacity: 0.6,
                strokeWidth: 7
            });

            // add the shape to the layer 
            this.layer.add(this.hexgon);

            // add the layer to the stage 
            stage.add(this.layer);
            })
        },
        watch:{
            comment(nv){
                localStorage.setItem("comment",nv)
            },
            score(nv){
                this.colorChange()
                if(!this.lemon){
                    this.setSummary()
                }
            },
            startcolor(nv){
                this.colorChange()
            },
            fontcolor(nv){
                this.hexgon.attrs.stroke = nv
                this.layer.draw()
            },
            endcolor(nv){
                this.colorChange()
            }
        },
        methods:{
            setSummary(){
                if(this.score >= 0&& this.score <= 2.9){
                    this.summary = '拙劣'
                    // this.summaryColor = 'white'
                }
                if(this.score >= 3&& this.score <= 5.9){
                    this.summary = '尚可'
                    // this.summaryColor = 'blue'
                }
                if(this.score >= 6&& this.score <= 7.9){
                    this.summary = '优秀'
                    // this.summaryColor = 'green'
                }
                if(this.score >= 8&& this.score <= 9.9){
                    this.summary = '卓越'
                    // this.summaryColor = 'purple'
                }
                if(this.score === 10){
                    this.summary = '文豪'
                    // this.summaryColor = 'yellow'
                }
            },
            defaultColor(){
                this.startcolor = '#b9e589'
                this.endcolor = '#294e01'
                this.fontcolor = '#ffffff'
                this.colorChange()
            },
            orangeColor(){
                this.startcolor = '#fcdd49'
                this.endcolor = '#ffa500'
                this.fontcolor = '#ffffff'
                this.colorChange()
            },
            colorChange(){
                this.getRgb(this.hexToRgb(this.startcolor),this.hexToRgb(this.endcolor));
                this.hexgon.attrs.fill = this.colors[this.score*10]
                this.bgc = this.colors[this.score*10]
                this.layer.draw()
            },
            getRgb(start,end){
                this.colors = []
                this.colors.push(this.getHex(start));
                let step = {
                    r:(end.r - start.r)/99,g:(end.g - start.g)/99,b:(end.b - start.b)/99
                }
                for(var i =1;i<100;i++){
                    let r = parseInt(start.r + step.r*i)
                    let g = parseInt(start.g + step.g*i)
                    let b = parseInt(start.b + step.b*i)
                    this.colors.push(this.getHex(
                    {
                        r,
                        g,
                        b
                    }))
                }
                   this.colors.push(this.getHex(end));
            },
            hexToRgb(hexstr){
                let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hexstr);
                return result ? {
                    r: parseInt(result[1], 16),
                    g: parseInt(result[2], 16),
                    b: parseInt(result[3], 16)
                } : null;
            },
            getHex(rgb){
                let hexstr = '#'
                for(let key in rgb){
                    let hexval = rgb[key].toString(16)
                    if(hexval.length === 1){
                        hexstr += '0'+ hexval
                    }else{
                         hexstr += hexval
                    }
                }
                return hexstr

            },
            captureImage(){
                html2canvas(document.querySelector(this.lemon?'.lemon-preview':'.preview')).then(canvas =>{
                    let base64Img = canvas.toDataURL("image/png");
                    let link = document.createElement('a');
                    link.href = base64Img;
                    link.download = `${this.acid}.png`;
                    link.click();
                    this.submitScore()
                })
            },
            submitScore(){
                if(this.acid && localStorage.getItem('uploaded') !== this.acid){
                    localStorage.setItem("uploaded",this.acid)
                    axios.post(`https://acfun.leanapp.cn/agnscore/${this.acid}`,{
                        title:this.title,
                        acid:this.acid,
                        comment:this.comment,
                        score:this.score,
                        content:this.content,
                        summary:this.summary,
                        channelId:this.channelId,
                        releaseDate:this.releaseDate,
                        author:this.author,
                        scoreType:this.lemon?'lemon':'agn'
                    }).then(res=>{
                        if(res.data.code === 200){
                            console.log('评分提交成功')
                        }
                    })
                }
            },
            uploadAndCopy(){
                html2canvas(document.querySelector(this.lemon?'.lemon-preview':'.preview')).then(canvas =>{
                    canvas.toBlob(blob=> {
                        const data = new FormData()
                        this.submitScore()
                        data.append('smfile',blob)
                       axios.post('https://sm.ms/api/upload',data).then(res=>{
                           this.uploadUrl = res.data.data.url
                       })
                    },'image/png');
                })
            },
            getArticle(){
                let aid = +this.article.replace('http://www.acfun.cn/a/ac','').replace("ac","").replace("\/","").trim()
                if(aid){
                    axios.get(`http://api.novel.xuwendiao.com/acfun/contents/${aid}`).then(res=>{
                        if(res.data.code === 200){
                            this.title = res.data.data.title
                            this.author = res.data.data.owner.name
                            this.channelId = res.data.data.channelId
                            var div = document.createElement('div')
                            div.innerHTML = res.data.data.article.content
                            this.articleContent = div.innerText
                            this.releaseDate = res.data.data.releaseDate
                            this.posttime = new Date(res.data.data.releaseDate)
                        }
                    })
                    this.acid = `ac${aid}`
                }else{
                    this.acid = ''
                }
            }
        }
    })
</script>
</body>
</html>